<!DOCTYPE html>

<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Developr</title>
	<meta name="description" content="">
	<meta name="author" content="">

	<!-- http://davidbcalhoun.com/2010/viewport-metatag -->
	<meta name="HandheldFriendly" content="True">
	<meta name="MobileOptimized" content="320">

	<!-- http://www.kylejlarson.com/blog/2012/iphone-5-web-design/ and http://darkforge.blogspot.fr/2010/05/customize-android-browser-scaling-with.html -->
	<meta name="viewport" content="user-scalable=0, initial-scale=1.0, target-densitydpi=115">

	<!-- For all browsers -->
	<link rel="stylesheet" href="css/reset.css?v=1">
	<link rel="stylesheet" href="css/style.css?v=1">
	<link rel="stylesheet" href="css/colors.css?v=1">
	<link rel="stylesheet" media="print" href="css/print.css?v=1">
	<!-- For progressively larger displays -->
	<link rel="stylesheet" media="only all and (min-width: 480px)" href="css/480.css?v=1">
	<link rel="stylesheet" media="only all and (min-width: 768px)" href="css/768.css?v=1">
	<link rel="stylesheet" media="only all and (min-width: 992px)" href="css/992.css?v=1">
	<link rel="stylesheet" media="only all and (min-width: 1200px)" href="css/1200.css?v=1">
	<!-- For Retina displays -->
	<link rel="stylesheet" media="only all and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5)" href="css/2x.css?v=1">

	<!-- Webfonts -->
	<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

	<!-- Additional styles -->
	<link rel="stylesheet" href="css/styles/form.css?v=1">
	<link rel="stylesheet" href="css/styles/switches.css?v=1">
	<link rel="stylesheet" href="css/styles/calendars.css?v=1">

	<!-- glDatePicker -->
	<link rel="stylesheet" href="js/libs/glDatePicker/developr.fixed.css?v=1">

	<!-- JavaScript at bottom except for Modernizr -->
	<script src="js/libs/modernizr.custom.js"></script>

	<!-- For Modern Browsers -->
	<link rel="shortcut icon" href="img/favicons/favicon.png">
	<!-- For everything else -->
	<link rel="shortcut icon" href="img/favicons/favicon.ico">

	<!-- iOS web-app metas -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<!-- iPhone ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon.png" sizes="57x57">
	<!-- iPad ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon-ipad.png" sizes="72x72">
	<!-- iPhone (Retina) ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon-retina.png" sizes="114x114">
	<!-- iPad (Retina) ICON -->
	<link rel="apple-touch-icon" href="img/favicons/apple-touch-icon-ipad-retina.png" sizes="144x144">

	<!-- iPhone SPLASHSCREEN (320x460) -->
	<link rel="apple-touch-startup-image" href="img/splash/iphone.png" media="(device-width: 320px)">
	<!-- iPhone (Retina) SPLASHSCREEN (640x960) -->
	<link rel="apple-touch-startup-image" href="img/splash/iphone-retina.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPhone 5 SPLASHSCREEN (640×1096) -->
	<link rel="apple-touch-startup-image" href="img/splash/iphone5.png" media="(device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
	<!-- iPad (portrait) SPLASHSCREEN (748x1024) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait.png" media="(device-width: 768px) and (orientation: portrait)">
	<!-- iPad (landscape) SPLASHSCREEN (768x1004) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape.png" media="(device-width: 768px) and (orientation: landscape)">
	<!-- iPad (Retina, portrait) SPLASHSCREEN (2048x1496) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-portrait-retina.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2)">
	<!-- iPad (Retina, landscape) SPLASHSCREEN (1536x2008) -->
	<link rel="apple-touch-startup-image" href="img/splash/ipad-landscape-retina.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2)">

	<!-- Microsoft clear type rendering -->
	<meta http-equiv="cleartype" content="on">
</head>

<body class="clearfix with-menu with-shortcuts">

	<!-- Prompt IE 6 users to install Chrome Frame -->
	<!--[if lt IE 7]><p class="message red-gradient simpler">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

	<!-- Title bar -->
	<header role="banner" id="title-bar">
		<h2>Developr</h2>
	</header>

	<!-- Button to open/hide menu -->
	<a href="#" id="open-menu"><span>Menu</span></a>

	<!-- Button to open/hide shortcuts -->
	<a href="#" id="open-shortcuts"><span class="icon-thumbs"></span></a>

	<!-- Main content -->
	<section role="main" id="main">

		<noscript class="message black-gradient simpler">Your browser does not support JavaScript! Some features won't work as expected...</noscript>

		<hgroup id="main-title" class="thin">
			<h1>Calendars</h1>
		</hgroup>

		<div class="with-padding">

			<p>The template includes a set of 4 calendar sizes, and a fluid calendar style, all of which are responsive. All sizes allow displaying a list of event for each day, even in smaller sizes - have a look below or resize your browser to see how the various sizes adapt to the screen's width.</p>

			<h3 class="thin">Fluid calendar</h3>

			<p>This is the most usefull style to display the maximum amount of data. It will scale to any screen width, including the smallest ones, and dates and events styles will change to make the most of the available space. It will also scale its height to preserve cells aspect ratio, but it is possible to set a height limit for bigger screens:</p>

			<table class="calendar fluid large-margin-bottom">

				<!-- Month and scroll arrows -->
				<caption>
					<span class="cal-prev">◄</span>
					<a href="#" class="cal-next">►</a>
					March 2012
				</caption>

				<!-- Days names -->
				<thead>
					<tr>
						<th scope="col">Sun</th>
						<th scope="col">Mon</th>
						<th scope="col">Tue</th>
						<th scope="col">Wed</th>
						<th scope="col">Thu</th>
						<th scope="col">Fri</th>
						<th scope="col">Sat</th>
					</tr>
				</thead>

				<!-- Dates -->
				<tbody>
					<tr>
						<td class="week-end prev-month"><span class="cal-day">30</span></td>
						<td>
							<span class="cal-day">1</span>
							<ul class="cal-events">
								<li class="to-next-day">Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">2</span>
							<ul class="cal-events">
								<li class="to-previous-day to-next-day">Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">3</span>
							<ul class="cal-events">
								<li class="to-previous-day">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">4</span></td>
						<td>
							<span class="cal-day">5</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">6</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">7</span></td>
						<td><span class="cal-day">8</span></td>
						<td class="today">
							<span class="cal-day">9</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">10</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">11</span></td>
						<td><span class="cal-day">12</span></td>
						<td class="week-end"><span class="cal-day">13</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">14</span></td>
						<td><span class="cal-day">15</span></td>
						<td><span class="cal-day">16</span></td>
						<td><span class="cal-day">17</span></td>
						<td><span class="cal-day">18</span></td>
						<td class="selected">
							<span class="cal-day">19</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">20</span></td>
					</tr>
					<tr>
						<td class="week-end">
							<span class="cal-day">21</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">22</span></td>
						<td><span class="cal-day">23</span></td>
						<td>
							<span class="cal-day">24</span>
							<ul class="cal-events">
								<li>Event description</li>
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">25</span></td>
						<td><span class="cal-day">26</span></td>
						<td class="week-end"><span class="cal-day">27</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">28</span></td>
						<td><span class="cal-day">29</span></td>
						<td><span class="cal-day">30</span></td>
						<td><span class="cal-day">31</span></td>
						<td class="next-month"><span class="cal-day">1</span></td>
						<td class="next-month"><span class="cal-day">2</span></td>
						<td class="week-end next-month"><span class="cal-day">3</span></td>
					</tr>
				</tbody>
				<!-- End dates -->

			</table>

			<div class="columns">

				<div class="six-columns twelve-columns-tablet">

					<div class="left-column-200px margin-bottom">

						<div class="left-column">
							<h3 class="thin">Mini calendar</h3>
							<p>This is the basic style, with no javascript. Perfect if you need to code a calendar feature from scratch!</p>
							<p>If you embed events in it, they will display as dots, and the complete list will show when a date is clicked.</p>
						</div>

						<div class="right-column">
							<table class="calendar margin-bottom">

								<!-- Month and scroll arrows -->
								<caption>
									<span class="cal-prev">◄</span>
									<a href="#" class="cal-next">►</a>
									March 2012
								</caption>

								<!-- Days names -->
								<thead>
									<tr>
										<th scope="col">Sun</th>
										<th scope="col">Mon</th>
										<th scope="col">Tue</th>
										<th scope="col">Wed</th>
										<th scope="col">Thu</th>
										<th scope="col">Fri</th>
										<th scope="col">Sat</th>
									</tr>
								</thead>

								<!-- Dates -->
								<tbody>
									<tr>
										<td class="week-end prev-month"><span class="cal-day">30</span></td>
										<td><span class="cal-day">1</span></td>
										<td><span class="cal-day">2</span></td>
										<td><span class="cal-day">3</span></td>
										<td><span class="cal-day">4</span></td>
										<td><span class="cal-day">5</span></td>
										<td class="week-end"><span class="cal-day">6</span></td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">7</span></td>
										<td><span class="cal-day">8</span></td>
										<td class="today"><span class="cal-day">9</span></td>
										<td><span class="cal-day">10</span></td>
										<td><span class="cal-day">11</span></td>
										<td><span class="cal-day">12</span></td>
										<td class="week-end"><span class="cal-day">13</span></td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">14</span></td>
										<td><span class="cal-day">15</span></td>
										<td><span class="cal-day">16</span></td>
										<td><span class="cal-day">17</span></td>
										<td><span class="cal-day">18</span></td>
										<td class="selected"><span class="cal-day">19</span></td>
										<td class="week-end"><span class="cal-day">20</span></td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">21</span></td>
										<td><span class="cal-day">22</span></td>
										<td><span class="cal-day">23</span></td>
										<td><span class="cal-day">24</span></td>
										<td><span class="cal-day">25</span></td>
										<td><span class="cal-day">26</span></td>
										<td class="week-end"><span class="cal-day">27</span></td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">28</span></td>
										<td><span class="cal-day">29</span></td>
										<td><span class="cal-day">30</span></td>
										<td><span class="cal-day">31</span></td>
										<td class="next-month"><span class="cal-day">1</span></td>
										<td class="next-month"><span class="cal-day">2</span></td>
										<td class="week-end next-month"><span class="cal-day">3</span></td>
									</tr>
								</tbody>
								<!-- End dates -->

							</table>
							<table class="calendar with-events">

								<!-- Month and scroll arrows -->
								<caption>
									<span class="cal-prev">◄</span>
									<a href="#" class="cal-next">►</a>
									March 2012
								</caption>

								<!-- Days names -->
								<thead>
									<tr>
										<th scope="col">Sun</th>
										<th scope="col">Mon</th>
										<th scope="col">Tue</th>
										<th scope="col">Wed</th>
										<th scope="col">Thu</th>
										<th scope="col">Fri</th>
										<th scope="col">Sat</th>
									</tr>
								</thead>

								<!-- Dates -->
								<tbody>
									<tr>
										<td class="week-end prev-month"><span class="cal-day">30</span></td>
										<td>
											<span class="cal-day">1</span>
											<ul class="cal-events">
												<li>Event description</li>
											</ul>
										</td>
										<td>
											<span class="cal-day">2</span>
											<ul class="cal-events">
												<li>Event description</li>
											</ul>
										</td>
										<td>
											<span class="cal-day">3</span>
											<ul class="cal-events">
												<li>Event description</li>
											</ul>
										</td>
										<td><span class="cal-day">4</span></td>
										<td>
											<span class="cal-day">5</span>
											<ul class="cal-events">
												<li class="important">Event description</li>
											</ul>
										</td>
										<td class="week-end"><span class="cal-day">6</span></td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">7</span></td>
										<td><span class="cal-day">8</span></td>
										<td class="today">
											<span class="cal-day">9</span>
											<ul class="cal-events">
												<li>Event description</li>
											</ul>
										</td>
										<td>
											<span class="cal-day">10</span>
											<ul class="cal-events">
												<li class="important">Event description</li>
											</ul>
										</td>
										<td><span class="cal-day">11</span></td>
										<td><span class="cal-day">12</span></td>
										<td class="week-end"><span class="cal-day">13</span></td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">14</span></td>
										<td><span class="cal-day">15</span></td>
										<td><span class="cal-day">16</span></td>
										<td><span class="cal-day">17</span></td>
										<td><span class="cal-day">18</span></td>
										<td class="selected">
											<span class="cal-day">19</span>
											<ul class="cal-events">
												<li class="important">Event description</li>
											</ul>
										</td>
										<td class="week-end"><span class="cal-day">20</span></td>
									</tr>
									<tr>
										<td class="week-end">
											<span class="cal-day">21</span>
											<ul class="cal-events">
												<li>Event description</li>
											</ul>
										</td>
										<td><span class="cal-day">22</span></td>
										<td><span class="cal-day">23</span></td>
										<td>
											<span class="cal-day">24</span>
											<ul class="cal-events">
												<li>Event description</li>
												<li class="important">Event description</li>
											</ul>
										</td>
										<td><span class="cal-day">25</span></td>
										<td><span class="cal-day">26</span></td>
										<td class="week-end"><span class="cal-day">27</span></td>
									</tr>
									<tr class="calendar-zoom">
										<td colspan="7">
											<span class="calendar-zoom-arrow" style="margin-left:103px"></span>
											<ul class="cal-events">
												<li>Event description</li>
												<li class="important">Event description</li>
											</ul>
										</td>
									</tr>
									<tr>
										<td class="week-end"><span class="cal-day">28</span></td>
										<td><span class="cal-day">29</span></td>
										<td><span class="cal-day">30</span></td>
										<td><span class="cal-day">31</span></td>
										<td class="next-month"><span class="cal-day">1</span></td>
										<td class="next-month"><span class="cal-day">2</span></td>
										<td class="week-end next-month"><span class="cal-day">3</span></td>
									</tr>
								</tbody>
								<!-- End dates -->

							</table>
						</div>

					</div>

				</div>

				<div class="six-columns twelve-columns-tablet">

					<div class="left-column-200px margin-bottom">

						<div class="left-column">
							<h3 class="thin">Functional mini-calendar</h3>
							<p>Using the plugin <a href="http://code.gautamlad.com/glDatePicker/">GlDatePicker</a>, here is an fully fonctional contextual or inline datepicker based on the mini calendar style:</p>
						</div>

						<div class="right-column">
							<p class="button-height">
								<span class="input">
									<span class="icon-calendar"></span>
									<input type="text" name="datepicker" id="datepicker" class="input-unstyled datepicker" value="">
								</span>
							</p>

							<div id="inline-datepicker"></div>
						</div>

					</div>

				</div>

			</div>

			<h3 class="thin">Other sizes</h3>

			<p>These are 3 intermediate sizes - the larger will only show if your browser's window is wide enough!</p>

			<h5 class="green">Medium size</h5>

			<table class="calendar medium with-events">

				<!-- Month and scroll arrows -->
				<caption>
					<span class="cal-prev">◄</span>
					<a href="#" class="cal-next">►</a>
					March 2012
				</caption>

				<!-- Days names -->
				<thead>
					<tr>
						<th scope="col">Sun</th>
						<th scope="col">Mon</th>
						<th scope="col">Tue</th>
						<th scope="col">Wed</th>
						<th scope="col">Thu</th>
						<th scope="col">Fri</th>
						<th scope="col">Sat</th>
					</tr>
				</thead>

				<!-- Dates -->
				<tbody>
					<tr>
						<td class="week-end prev-month"><span class="cal-day">30</span></td>
						<td>
							<span class="cal-day">1</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">2</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">3</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">4</span></td>
						<td>
							<span class="cal-day">5</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">6</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">7</span></td>
						<td><span class="cal-day">8</span></td>
						<td class="today">
							<span class="cal-day">9</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">10</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">11</span></td>
						<td><span class="cal-day">12</span></td>
						<td class="week-end"><span class="cal-day">13</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">14</span></td>
						<td><span class="cal-day">15</span></td>
						<td><span class="cal-day">16</span></td>
						<td><span class="cal-day">17</span></td>
						<td><span class="cal-day">18</span></td>
						<td class="selected">
							<span class="cal-day">19</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">20</span></td>
					</tr>
					<tr>
						<td class="week-end">
							<span class="cal-day">21</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">22</span></td>
						<td><span class="cal-day">23</span></td>
						<td>
							<span class="cal-day">24</span>
							<ul class="cal-events">
								<li>Event description</li>
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">25</span></td>
						<td><span class="cal-day">26</span></td>
						<td class="week-end"><span class="cal-day">27</span></td>
					</tr>
					<tr class="calendar-zoom">
						<td colspan="7">
							<span class="calendar-zoom-arrow" style="margin-left:186px"></span>
							<ul class="cal-events">
								<li>Event description</li>
								<li class="important">Event description</li>
							</ul>
						</td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">28</span></td>
						<td><span class="cal-day">29</span></td>
						<td><span class="cal-day">30</span></td>
						<td><span class="cal-day">31</span></td>
						<td class="next-month"><span class="cal-day">1</span></td>
						<td class="next-month"><span class="cal-day">2</span></td>
						<td class="week-end next-month"><span class="cal-day">3</span></td>
					</tr>
				</tbody>
				<!-- End dates -->

			</table>

			<h5 class="green">Large size</h5>

			<table class="calendar large with-events">

				<!-- Month and scroll arrows -->
				<caption>
					<span class="cal-prev">◄</span>
					<a href="#" class="cal-next">►</a>
					March 2012
				</caption>

				<!-- Days names -->
				<thead>
					<tr>
						<th scope="col">Sun</th>
						<th scope="col">Mon</th>
						<th scope="col">Tue</th>
						<th scope="col">Wed</th>
						<th scope="col">Thu</th>
						<th scope="col">Fri</th>
						<th scope="col">Sat</th>
					</tr>
				</thead>

				<!-- Dates -->
				<tbody>
					<tr>
						<td class="week-end prev-month"><span class="cal-day">30</span></td>
						<td>
							<span class="cal-day">1</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">2</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">3</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">4</span></td>
						<td>
							<span class="cal-day">5</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">6</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">7</span></td>
						<td><span class="cal-day">8</span></td>
						<td class="today">
							<span class="cal-day">9</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">10</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">11</span></td>
						<td><span class="cal-day">12</span></td>
						<td class="week-end"><span class="cal-day">13</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">14</span></td>
						<td><span class="cal-day">15</span></td>
						<td><span class="cal-day">16</span></td>
						<td><span class="cal-day">17</span></td>
						<td><span class="cal-day">18</span></td>
						<td class="selected">
							<span class="cal-day">19</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">20</span></td>
					</tr>
					<tr>
						<td class="week-end">
							<span class="cal-day">21</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">22</span></td>
						<td><span class="cal-day">23</span></td>
						<td>
							<span class="cal-day">24</span>
							<ul class="cal-events">
								<li>Event description</li>
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">25</span></td>
						<td><span class="cal-day">26</span></td>
						<td class="week-end"><span class="cal-day">27</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">28</span></td>
						<td><span class="cal-day">29</span></td>
						<td><span class="cal-day">30</span></td>
						<td><span class="cal-day">31</span></td>
						<td class="next-month"><span class="cal-day">1</span></td>
						<td class="next-month"><span class="cal-day">2</span></td>
						<td class="week-end next-month"><span class="cal-day">3</span></td>
					</tr>
				</tbody>
				<!-- End dates -->

			</table>

			<h5 class="green">Largest size</h5>

			<table class="calendar largest with-events">

				<!-- Month and scroll arrows -->
				<caption>
					<span class="cal-prev">◄</span>
					<a href="#" class="cal-next">►</a>
					March 2012
				</caption>

				<!-- Days names -->
				<thead>
					<tr>
						<th scope="col">Sun</th>
						<th scope="col">Mon</th>
						<th scope="col">Tue</th>
						<th scope="col">Wed</th>
						<th scope="col">Thu</th>
						<th scope="col">Fri</th>
						<th scope="col">Sat</th>
					</tr>
				</thead>

				<!-- Dates -->
				<tbody>
					<tr>
						<td class="week-end prev-month"><span class="cal-day">30</span></td>
						<td>
							<span class="cal-day">1</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">2</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">3</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">4</span></td>
						<td>
							<span class="cal-day">5</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">6</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">7</span></td>
						<td><span class="cal-day">8</span></td>
						<td class="today">
							<span class="cal-day">9</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td>
							<span class="cal-day">10</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">11</span></td>
						<td><span class="cal-day">12</span></td>
						<td class="week-end"><span class="cal-day">13</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">14</span></td>
						<td><span class="cal-day">15</span></td>
						<td><span class="cal-day">16</span></td>
						<td><span class="cal-day">17</span></td>
						<td><span class="cal-day">18</span></td>
						<td class="selected">
							<span class="cal-day">19</span>
							<ul class="cal-events">
								<li class="important">Event description</li>
							</ul>
						</td>
						<td class="week-end"><span class="cal-day">20</span></td>
					</tr>
					<tr>
						<td class="week-end">
							<span class="cal-day">21</span>
							<ul class="cal-events">
								<li>Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">22</span></td>
						<td><span class="cal-day">23</span></td>
						<td>
							<span class="cal-day">24</span>
							<ul class="cal-events">
								<li>Event description</li>
								<li class="important">Event description</li>
							</ul>
						</td>
						<td><span class="cal-day">25</span></td>
						<td><span class="cal-day">26</span></td>
						<td class="week-end"><span class="cal-day">27</span></td>
					</tr>
					<tr>
						<td class="week-end"><span class="cal-day">28</span></td>
						<td><span class="cal-day">29</span></td>
						<td><span class="cal-day">30</span></td>
						<td><span class="cal-day">31</span></td>
						<td class="next-month"><span class="cal-day">1</span></td>
						<td class="next-month"><span class="cal-day">2</span></td>
						<td class="week-end next-month"><span class="cal-day">3</span></td>
					</tr>
				</tbody>
				<!-- End dates -->

			</table>

		</div>

	</section>
	<!-- End main content -->

	<!-- Side tabs shortcuts -->
	<ul id="shortcuts" role="complementary" class="children-tooltip tooltip-right">
		<li><a href="./" class="shortcut-dashboard" title="Dashboard">Dashboard</a></li>
		<li><a href="inbox.html" class="shortcut-messages" title="Messages">Messages</a></li>
		<li class="current"><a href="agenda.html" class="shortcut-agenda" title="Agenda">Agenda</a></li>
		<li><a href="tables.html" class="shortcut-contacts" title="Contacts">Contacts</a></li>
		<li><a href="explorer.html" class="shortcut-medias" title="Medias">Medias</a></li>
		<li><a href="sliders.html" class="shortcut-stats" title="Stats">Stats</a></li>
		<li><a href="form.html" class="shortcut-settings" title="Settings">Settings</a></li>
		<li><span class="shortcut-notes" title="Notes">Notes</span></li>
	</ul>

	<!-- Sidebar/drop-down menu -->
	<section id="menu" role="complementary">

		<!-- This wrapper is used by several responsive layouts -->
		<div id="menu-content">

			<header>
				Administrator
			</header>

			<div id="profile">
				<img src="img/user.png" width="64" height="64" alt="User name" class="user-icon">
				Hello
				<span class="name">John <b>Doe</b></span>
			</div>

			<!-- By default, this section is made for 4 icons, see the doc to learn how to change this, in "basic markup explained" -->
			<ul id="access" class="children-tooltip">
				<li><a href="inbox.html" title="Messages"><span class="icon-inbox"></span><span class="count">2</span></a></li>
				<li><a href="calendars.html" title="Calendar"><span class="icon-calendar"></span></a></li>
				<li><a href="login.html" title="Profile"><span class="icon-user"></span></a></li>
				<li class="disabled"><span class="icon-gear"></span></li>
			</ul>

			<section class="navigable">
				<ul class="big-menu">
					<li class="with-right-arrow">
						<span><span class="list-count">11</span>Main styles</span>
						<ul class="big-menu">
							<li><a href="typography.html">Typography</a></li>
							<li><a href="columns.html">Columns</a></li>
							<li><a href="tables.html">Tables</a></li>
							<li><a href="colors.html">Colors &amp; backgrounds</a></li>
							<li><a href="icons.html">Icons</a></li>
							<li><a href="files.html">Files &amp; Gallery</a></li>
							<li class="with-right-arrow">
								<span><span class="list-count">4</span>Forms &amp; buttons</span>
								<ul class="big-menu">
									<li><a href="buttons.html">Buttons</a></li>
									<li><a href="form.html">Form elements</a></li>
									<li><a href="textareas.html">Textareas &amp; WYSIWYG</a></li>
									<li><a href="form-layouts.html">Form layouts</a></li>
									<li><a href="wizard.html">Wizard</a></li>
								</ul>
							</li>
							<li class="with-right-arrow">
								<span><span class="list-count">2</span>Agenda &amp; Calendars</span>
								<ul class="big-menu">
									<li><a href="agenda.html">Agenda</a></li>
									<li><a href="calendars.html" class="current navigable-current">Calendars</a></li>
								</ul>
							</li>
							<li><a href="blocks.html">Blocks &amp; infos</a></li>
						</ul>
					</li>
					<li class="with-right-arrow">
						<span><span class="list-count">8</span>Main features</span>
						<ul class="big-menu">
							<li><a href="auto-setup.html">Automatic setup</a></li>
							<li><a href="responsive.html">Responsiveness</a></li>
							<li><a href="tabs.html">Tabs</a></li>
							<li><a href="sliders.html">Slider &amp; progress</a></li>
							<li><a href="modals.html">Modal windows</a></li>
							<li class="with-right-arrow">
								<span><span class="list-count">3</span>Messages &amp; notifications</span>
								<ul class="big-menu">
									<li><a href="messages.html">Messages</a></li>
									<li><a href="notifications.html">Notifications</a></li>
									<li><a href="tooltips.html">Tooltips</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="with-right-arrow">
						<a href="ajax-demo/submenu.html" class="navigable-ajax" title="Menu title">With ajax sub-menu</a>
					</li>
				</ul>
			</section>

			<ul class="unstyled-list">
				<li class="title-menu">Today's event</li>
				<li>
					<ul class="calendar-menu">
						<li>
							<a href="#" title="See event">
								<time datetime="2011-02-24"><b>24</b> Feb</time>
								<small class="green">10:30</small>
								Event's description
							</a>
						</li>
					</ul>
				</li>
				<li class="title-menu">New messages</li>
				<li>
					<ul class="message-menu">
						<li>
							<span class="message-status">
								<a href="#" class="starred" title="Starred">Starred</a>
								<a href="#" class="new-message" title="Mark as read">New</a>
							</span>
							<span class="message-info">
								<span class="blue">17:12</span>
								<a href="#" class="attach" title="Download attachment">Attachment</a>
							</span>
							<a href="#" title="Read message">
								<strong class="blue">John Doe</strong><br>
								<strong>Mail subject</strong>
							</a>
						</li>
						<li>
							<a href="#" title="Read message">
								<span class="message-status">
									<span class="unstarred">Not starred</span>
									<span class="new-message">New</span>
								</span>
								<span class="message-info">
									<span class="blue">15:47</span>
								</span>
								<strong class="blue">May Starck</strong><br>
								<strong>Mail subject a bit longer</strong>
							</a>
						</li>
						<li>
							<span class="message-status">
								<span class="unstarred">Not starred</span>
							</span>
							<span class="message-info">
								<span class="blue">15:12</span>
							</span>
							<strong class="blue">May Starck</strong><br>
							Read message
						</li>
					</ul>
				</li>
			</ul>

		</div>
		<!-- End content wrapper -->

		<!-- This is optional -->
		<footer id="menu-footer">
			<p class="button-height">
				<input type="checkbox" name="auto-refresh" id="auto-refresh" checked="checked" class="switch float-right">
				<label for="auto-refresh">Auto-refresh</label>
			</p>
		</footer>

	</section>
	<!-- End sidebar/drop-down menu -->

	<!-- JavaScript at the bottom for fast page loading -->

	<!-- Scripts -->
	<script src="js/libs/jquery-1.10.2.min.js"></script>
	<script src="js/setup.js"></script>

	<!-- Template functions -->
	<script src="js/developr.input.js"></script>
	<script src="js/developr.navigable.js"></script>
	<script src="js/developr.notify.js"></script>
	<script src="js/developr.scroll.js"></script>
	<script src="js/developr.tooltip.js"></script>
	<script src="js/developr.calendar.js"></script>

	<!-- glDatePicker -->
	<script src="js/libs/glDatePicker/glDatePicker.min.js?v=1"></script>

	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();

		// Date picker
		$('.datepicker').glDatePicker({ zIndex: 200 });

		// Inline date picker
		$('#inline-datepicker').glDatePicker({
			showAlways: true,
			position: 'inherit',
			zIndex: 100
		});

	</script>
</body>
</html>